<template>
  <div class="page-container">
    <el-row>
      <el-col :span="4">
        <el-menu style="margin-top: 10px; background-color: aliceblue" mode="vertical" text-color="black" active-text-color="blue">
          <el-menu-item :index="sorts.id + ''" v-for="sorts in sortData" :key="sorts.id" @click="selectSort(sorts.id)">{{ sorts.sortName }} 编码:{{ sorts.id }}</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="startAt" label="可用开始时间"></el-table-column>
          <el-table-column prop="endAt" label="到期时间"></el-table-column>
          <el-table-column prop="total" label="库存"></el-table-column>
          <el-table-column prop="integral" label="兑换所需积分"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="buyCoupon(scope.row.id)">兑换</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页部分 -->
    <el-row>
      <el-col class="offset">
        <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum" layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage" @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
        
      <script>
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      departs: [],
      addParam: {
        id: "",
        parentId: "",
        name: "",
        status: "1",
        remark: "",
      },
      sortData: [],
      tableData: [],
      selectedSort: 1, // 表格数据

    };
  },
  methods: {
    selectSort(id) {
      this.selectedSort = id;
      this.querySortDetail();
    },

    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.querySortDetail();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.querySortDetail();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.querySortDetail();
    },
    currentPage(val) {
      this.pageNum = val;
      this.querySortDetail();
    },
    queryCondition() {
      thispageNum = 1;
      this.querySortDetail();
    },
    querySort() {
      this.$axios.post("/api/zgyd-jifen/querySort").then((res) => {
        this.sortData = res.data.data;
          this.querySortDetail()
      });
    },
    querySortDetail() {
      //带分页参数pageNum,pageSize
      let param = {};
      param.sortId = this.selectedSort;
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      pageParam.param = param;
      this.$axios
        .post("/api/zgyd-jifen/queryCouponBySortId", pageParam)
        .then((res) => {
          if (res.data.code == 200) {
            let pageData = res.data.data;
            this.tableData = pageData.records;
            //给分页参数赋值
            this.total = pageData.total;
            this.pageNum = pageData.current;
            this.pageSize = pageData.size;
          }
        });
    },
    buyCoupon(id) {
      this.$axios
        .get("/api/zgyd-jifen/buyCoupon/"+id)
        .then((res) => {
          if (res.data.code == 200) {
            alert("兑换成功")
            this.querySort();
          }else{
            alert(res.data.msg)
          }
        });

    },
  },
  created() {
    this.querySort();
  },
};
</script>
        
    <style scoped>
.offset {
  margin-left: 270px;
}
.el-table {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.el-table th {
  background-color: #f5f7fa;
  font-size: 16px;
  color: #303133;
}

.el-table td {
  padding: 12px 0;
}

.el-menu {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
  font-size: 14px;
  color: #303133;
}

.el-menu-item.is-active {
  background-color: #409eff;
  color: #fff;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}

.el-pagination .btn-prev,
.el-pagination .btn-next,
.el-pagination .el-pager li {
  background-color: #f5f7fa;
  color: #303133;
  font-size: 14px;
}

.el-pagination .el-pager li.active {
  background-color: #409eff;
  color: #fff;
}

.page-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>